<template>
  <div>
    <el-page-header @back="goBack" content="学员">
    </el-page-header>
    <div style="margin-top: 10px;">
      <el-table style="width: 100%" :data="authViewList.filter(data => !authSearch || data.userView.nickName.toLowerCase().includes(authSearch.toLowerCase()))"
                border :empty-text="loadingFlag === true ? '正在拼命加载中...':'暂无数据'">
        <el-table-column prop="userView.nickName" label="学员名称"></el-table-column>
        <el-table-column prop="userView.avatarUrl" label="学员头像">
          <template slot-scope="scope">
            <el-avatar :src="mediaHost + scope.row.userView.avatarUrl"></el-avatar>
          </template>
        </el-table-column>
        <el-table-column prop="createTimeStr" label="报名时间"></el-table-column>
        <el-table-column>
          <template slot="header" slot-scope="scope">
            <el-input
              v-model="authSearch"
              size="mini"
              placeholder="输入关键字搜索"/>
          </template>
<!--          <template slot-scope="scope">-->
<!--            <el-button-->
<!--              size="mini"-->
<!--              type="danger"-->
<!--              @click="kickOut(scope.$index, scope.row)">踢出学员-->
<!--            </el-button>-->
<!--          </template>-->
          <template slot-scope="scope">
            用户ID：{{scope.row.userView.userId}}
          </template>
        </el-table-column>
      </el-table>
      <!--请求标识-->
      <div v-if="loadingFlag=== true" style="text-align: center;font-size: larger;margin-top: 10px;">
        <i  class="el-icon-loading"></i>
      </div>
      <div v-else-if="studentPage.hasMore === true" style="text-align: center;font-size: small;color: #99a9bf;margin-top: 10px;" @click="loadingMore()">
        <span>--点击加载更多--</span>
      </div>
      <div v-else-if="authViewList.length > 0" style="text-align: center;font-size: small;color: #99a9bf;margin-top: 10px;">
        <span>--没有更多数据了--</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Student",
  data() {
    return{
      activityId: this.$route.query.activityId,
      mediaHost: this.$global.mediaHost,
      authViewList: [],
      studentPage: this.$global.indexPage,
      paramsData:{
        page:this.studentPage,
        activityId: this.activityId
      },
      authSearch:'',
      loadingFlag: false,
    }
  },
  mounted() {
    addEventListener('scroll', this.handleScroll)//监听函数
  },
  methods: {
    handleScroll() {
      //变量scrollTop是滚动条滚动时，距离顶部的距离
      let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      //变量windowHeight是可视区的高度
      let windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
      //变量scrollHeight是滚动条的总高度
      let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
      //滚动条到底部的条件
      if (scrollTop + windowHeight === scrollHeight) {
        //你想做的事情
        if (this.studentPage.hasMore === true && !this.loadingFlag) {
          this.studentPage.page += 1;
          this.getAuthList();
        }
      }
    },
    loadingMore:function () {
      this.studentPage.page += 1;
      this.getAuthList();
    },
    goBack() {
      this.$router.push({path: "/homePage/activity"})
    },
    /**
     * 此班级的学员
     */
    getAuthList: function () {
      this.loadingFlag = true;
      this.paramsData.page = this.studentPage
      this.paramsData.activityId = this.activityId
      this.$ajax({
        method: 'post',
        headers: this.$global.headers,
        url: this.$global.host + '/v1/auth/getAuthList',
        data: JSON.stringify({
          "data": this.paramsData,
          "user": this.$global.getUser(),
          "teamId": this.$global.getTeamId()
        }),
      }).then(response => {
        const responseData = response.data.data;
        const responseState = response.data.state
        if (2000 === responseState.code) {
          this.loadingFlag = false;
          this.authViewList = this.authViewList.concat(responseData.pageData.data)
          this.studentPage = responseData.pageData.page
        } else {
          this.$message.error({
            message: responseState.msg,
            center: true,
            duration: 1000
          });
        }
      }).catch(function (err) {
        console.log(err)
      })
    },
    /**
     * 踢出此课程的某个学员
     */
    kickOut: function (index, row) {
      this.paramsData.currentUserId = row.userView.userId
      this.$ajax({
        method: 'post',
        headers: this.$global.headers,
        url: this.$global.host + '/v1/auth/kickOut',
        data: JSON.stringify({
          "data": this.paramsData,
          "user": this.$global.getUser(),
          "teamId": this.$global.getTeamId()
        }),
      }).then(response => {
        const responseData = response.data.data;
        const responseState = response.data.state
        if (2000 === responseState.code) {
          this.$message.success({
            message: "已成功踢出该学员",
            center: true,
            duration: 1000
          });
          this.deleteData()
          this.getAuthList()
        } else {
          this.$message.error({
            message: responseState.msg,
            center: true,
            duration: 1000
          });
        }
      }).catch(function (err) {
        console.log(err)
      })
    },
    deleteData:function () {
      this.authViewList = []
      this.studentPage = this.$global.indexPage
    }
  },
  created() {
    this.getAuthList()
  }
}
</script>

<style scoped>

</style>
